<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
?>
<html>
    <head>
        <link rel="shortcut icon" href="images/iTrack.ico"> 
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PRIVATE">
        <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en-US">
        <META NAME="DESCRIPTION" CONTENT="Tasks application home page">
        <META NAME="KEYWORDS" CONTENT="iTrack">
        <META NAME="COPYRIGHT" CONTENT="&copy; iTrack 2013">

        <title>Demo</title>

        <link href="assets/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 60px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
        <script src="assets/js/jquery.js"></script>        
        <script src="assets/js/popup.js"></script> 
        <script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
        <script type='text/javascript' src='jquery/knockout-2.2.1.js'></script>



        <script type="text/javascript">
            $(document).ready(function() {
                function productViewModel (){
                    this.product = ko.observableArray([
                    { id: 1, product:"Orange Leather Bag", price: "$260.00",quantity:2, image:"images/products/image1.jpg" },
                    { id: 2, product:"Organic Valley Vegetables", price: "$20.00",quantity:4, image:"images/products/image2.jpg" },
                    { id: 3, product:"Clorox Bathroom Supplies", price: "$120.00",quantity:1, image:"images/products/image3.jpg" },
                    { id: 4, product:"Laundry Cleaners", price: "$50.00" ,quantity:6, image:"images/products/image4.jpg"},
                ]);
    
                    
                }
                
                // Apply bindings
                ko.applyBindings(new productViewModel());
            });            
        </script>   
    </head>
    <body onclick="onbodyclick()">


        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="home.php">iTrack</a>

                    <div class="btn-group pull-right">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="icon-user"></i> Demo
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="profile.php">Profile</a></li>
                            <li class="divider"></li>
                            <li><a href="logout.php">Logout</a></li>
                        </ul>
                    </div>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="home.php"><i class="icon-home icon-white"></i> Home</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-tasks icon-white"></i> Options <b class="caret"></b></a>
                                <ul class="dropdown-menu">                
                                    <li><a href="settings.php"><i class="icon-wrench"></i> Settings</a></li>
                                    <li><a href="feedback.php"><i class="icon-thumbs-up"></i> Send Feedback</a></li>
                                    <li><a href="about.php"><i class="icon-info-sign"></i>About</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->


                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">Shortcuts</li>
                            <li><a href="home.php"><i class="icon-home"></i> Home</a></li>
                            <li class="active"><a href="projects.php"><i class="icon-file"></i> Projects</a></li>
                            <li><a href="people.php"><i class="icon-user"></i> People</a></li>         
                        </ul>
                    </div><!--/.well -->
                </div><!--/span-->
                <div class="span10">          
                    <div class="row-fluid">
                        <div class="span12">
                            
                            <h3 class="text-info">Products</h3>
                            
                                
                                <ul class="thumbnails" data-bind="foreach: product">
                                    <li class="span3">
                                        <div class="thumbnail">
                                            <img data-src="holder.js/260x180" 
                                                alt="" data-bind="attr: { src: image, title: product }">
                                            <hr>
                                            <div style="text-align: center">
                                            <h3><span data-bind="text: product"></span>
                                            &nbsp; <span class="badge badge-important" data-bind="text: quantity"></span>
                                            </h3>
                                            <div class="muted">Price: <span data-bind="text: price"></span></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            
                            
                        </div><!--/span-->          
                    </div><!--/row-->

                </div><!--/span-->
            </div><!--/row-->

            <!-- Include footer -->
            <?php include_once 'footer.php'; ?>
        </div>



        <!-- Placed at the end of the document so the pages load faster -->            
        <script src="assets/js/bootstrap-transition.js"></script>
        <script src="assets/js/bootstrap-alert.js"></script>
        <script src="assets/js/bootstrap-modal.js"></script>
        <script src="assets/js/bootstrap-dropdown.js"></script>
        <script src="assets/js/bootstrap-scrollspy.js"></script>
        <script src="assets/js/bootstrap-tab.js"></script>
        <script src="assets/js/bootstrap-tooltip.js"></script>
        <script src="assets/js/bootstrap-popover.js"></script>
        <script src="assets/js/bootstrap-button.js"></script>
        <script src="assets/js/bootstrap-collapse.js"></script>
        <script src="assets/js/bootstrap-carousel.js"></script>
        <script src="assets/js/bootstrap-typeahead.js"></script>

    </body>
</html>